<template>
	<view class="home">
		<view class="nav-box" :style="{'padding-top':navHeight+'px'}">
			<image src="@/static/images/01_20bj.png" class="nav-img" mode=""></image>
			<view class="u-flex-y-center">
				<view class="u-flex-y-center" @click="changeCity">
					<up-text :text="data.city" color="#fff" size="14"></up-text>
					<image src="/static/images/01_q.png" class="nav-icon"></image>
				</view>
				<view class="nav-search u-flex-y-center u-flex-fill" @click="handleSearch">
					<image src="/static/images/01_1erss.png"></image>
					<text>请输入关键词搜索</text>
				</view>
			</view>
		</view>
		<view class="u-p-l-20 u-p-r-20 u-p-t-16">
			<up-swiper :list="list" key-name="image"></up-swiper>
			<view class="menu-box">
				<up-row gutter="35">
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/houseList/houseList?type=1')">
							<image src="@/static/images/01_asszdfcs.png" mode=""></image>
							<view>新盘</view>
						</view>
					</up-col>
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/houseList/houseList?type=2')">
							<image src="@/static/images/01_ftgsd.png" mode=""></image>
							<view>二手房</view>
						</view>
					</up-col>
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/activityZone')">
							<image src="@/static/images/04_w.png" mode=""></image>
							<view>活动专区</view>
						</view>
					</up-col>
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/certificateHouse')">
							<image src="@/static/images/01_sderfew.png" mode=""></image>
							<view>领券购房</view>
						</view>
					</up-col>
				</up-row>
			</view>
			<view class="menu-box">
				<up-row gutter="35">
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/integralShop/integralShop')">
							<image src="@/static/images/01_assz.png" mode=""></image>
							<view>积分商城</view>
						</view>
					</up-col>
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/redEnvelope/redEnvelope')">
							<image src="@/static/images/01_ftg.png" mode=""></image>
							<view>每日红包</view>
						</view>
					</up-col>
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/houseHot/houseHot')">
							<image src="@/static/images/01_sderf.png" mode=""></image>
							<view>房源热榜</view>
						</view>
					</up-col>
					<up-col span="3">
						<view class="menu-item" @click="$u.route('/pages/index/housingResources/housingResources')">
							<image src="@/static/images/01_sderfew.png" mode=""></image>
							<view>房源发布</view>
						</view>
					</up-col>
				</up-row>
			</view>
			<view class="u-flex-y-center u-flex-between u-m-t-20">
				<view class="video-item" @click="$u.route('/pages/index/houseLive/houseLive?type=2')">
					<view>视频看房</view>
					<image :src="prefixURL(data.video_cove)||'/static/images/video_img.png'" class="video-img" mode=""></image>
				</view>
				<view class="video-item" @click="handleLive">
					<view>直播看房</view>
					<image :src="prefixURL(data.live_cove)||'/static/images/live_img.png'" class="video-img" mode=""></image>
				</view>
			</view>
			<swiper vertical circular :autoplay="true" :interval="3000" :duration="1000" style="height:130rpx">
				<swiper-item v-for="(item,index) in data.article" :key="item.id">
					<view class="notice-box u-flex-y-center u-flex-between u-m-t-24"
						@click="$u.route('/pages/index/newsList/newsList')">
						<view class="u-flex-1">
							<view>{{item.title}}</view>
							<view class="u-line-1">{{item.description}}</view>
						</view>
						<image src="@/static/images/01_qtyu.png" class="" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<houseRank :rankList="data.ranks"></houseRank>
		</view>
		<view class="u-flex-y-center u-flex-between house-box">
			<view class="u-flex-y-center">
				<view :class="data.current== 2?'active':'inactive'" @click="changeHouse(2)">
					<text>二手房</text>
					<view class="active-bar" v-if="data.current == 2"></view>
				</view>
				<view class="u-m-l-56 " :class="data.current== 1?'active':'inactive'" @click="changeHouse(1)">
					<text>新房</text>
					<view class="active-bar" v-if="data.current == 1"></view>
				</view>
			</view>
			<view class="house-more" @click="$u.route('/pages/index/houseList/houseList')">
				<text>查看更多</text>
				<image src="@/static/images/01_kug.png" mode=""></image>
			</view>
		</view>
		<view v-for="(item,index) in data.houseList" :key="item.id" class="u-p-l-20 u-p-r-20">
			<house-item customStyle="background:#fff" :item="item" :imageWidth="234" imageHeight="192">
				<template #right>
					<view class="u-flex-between u-flex-column u-flex-fill">
						<view class="house-name u-flex-y-center">
							<view class="house-tag" v-if="item.label">{{item.label}}</view>
							<view class="u-line-1 u-flex-1">{{item.title}}</view>
						</view>
						<view class="house-desc">“{{item.description}}”</view>
						<view class="house-info">“{{item.space}}㎡ |{{item.house_type_text}}”</view>
						<view class="house-price u-flex-between u-flex-y-center">
							<text>市场价：{{item.market_price}}万</text>
							<text>优惠价：{{item.price}}万</text>
						</view>
					</view>
				</template>
			</house-item>
		</view>
	</view>
</template>

<script setup>
	import {
		config
	} from '@/common/config';
	import {
		geocoder,
		home,
		houseList
	} from '@/config/api';
	import houseRank from './components/house-rank.vue';
	import houseItem from '@/components/house-item/house-item.vue';
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCache,
		prefixURL,
		setCache
	} from '../../util/util';
	import {
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'
	const props = defineProps({
		code: {
			type: [String, Number],
			default: ''
		}
	})
	const navHeight = computed(() => uni.getSystemInfoSync().statusBarHeight + 10)
	const list = ref([])
	const data = ref({
		current: 2,
		houseList: [],
		article: [],
		ranks: [],
		city: '',
		city_id: '',
		video_cove: '',
		live_cove: ''
	})
	if (props.code) {
		setCache('code', props.code)
	}
	onShow(() => {
		_home()
		_houseList()
		_geocoder()
	})
	onShareAppMessage(() => {})
	onShareTimeline(() => {})
	const handleLive = () => {
		// #ifdef MP-WEIXIN
		uni.$u.route('/pages/index/houseLive/houseLive')
		// #endif
		// #ifndef MP-WEIXIN
		uni.$u.toast('观看直播请在微信小程序中进行操作')
		// #endif
	}
	const _geocoder = () => {
		if (getCache('city')) {
			data.value.city = getCache('city')
			data.value.city_id = getCache('city_id')
		} else {
			const systemSetting = uni.getSystemSetting()
			uni.getLocation({
				success: ({
					longitude,
					latitude
				}) => {
					geocoder({
						latitude,
						longitude
					}).then(res => {
						data.value.city = res.data.name
						data.value.city_id = res.data.id
						setCache('city', res.data.name)
						setCache('city_id', res.data.id)
					})
				},
				fail: () => {
					data.value.city = '烟台'
					data.value.city_id = '1421'
					setCache('city', '烟台')
					setCache('city_id', 1421)
				}
			})
		}
	}
	// 小区
	const _houseList = () => {
		houseList({
			page: 1,
			limit: 5,
			type: data.value.current
		}).then(res => {
			data.value.houseList = res.data.data
		})
	}
	// 首页
	const _home = () => {
		home().then(res => {
			list.value = res.data.swiper.map(item => {
				item.image = prefixURL(item.image)
				return item
			})
			data.value.ranks = res.data.ranks
			data.value.article = res.data.article
			data.value.live_cove = res.data.live_cove
			data.value.video_cove = res.data.video_cove
		})
	}
	// 切换房源列表
	const changeHouse = ((e) => {
		data.value.current = e
		_houseList()
	})
	const changeCity = (() => {
		uni.navigateTo({
			url: '/pages/index/changeCity'
		})
	})
	const handleSearch = (() => {
		uni.navigateTo({
			url: '/pages/index/searchPage'
		})
	})
</script>

<style scoped lang="scss">
	.home {
		background: #F7F6FA;
		min-height: 100vh;
		padding-bottom: 50rpx;
	}

	.nav-box {
		position: relative;
		z-index: 2;
		height: 204rpx;
		padding: 0 20rpx;

		.nav-img {
			top: 0;
			left: 0;
			width: 100%;
			height: 204rpx;
			position: absolute;
			z-index: -1;
		}

		.nav-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}

		.nav-search {
			background: #fff;
			height: 76rpx;
			border-radius: 38rpx;
			margin-left: 20rpx;
			padding: 0 24rpx;
			font-size: 26rpx;
			color: #909090;

			image {
				width: 36rpx;
				margin-right: 16rpx;
				height: 36rpx;
			}

			text {
				margin-left: 16rpx;
			}
		}
	}



	.menu-box {
		padding: 30rpx 36rpx 24rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;

		.menu-item {
			color: #333;
			font-size: 26rpx;
			font-weight: 500;
			text-align: center;
			margin: auto;

			image {
				width: 72rpx;
				height: 72rpx;
				margin-bottom: 12rpx;
			}
		}
	}

	.video-item {
		width: 346rpx;
		height: 338rpx;
		border-radius: 16rpx;
		background: linear-gradient(129deg, #FFF3EA 0%, #F6FFFC 61%, #FFFFFF 100%);
		padding: 20rpx 18rpx;
		position: relative;

		.video-play {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 100rpx;
			margin: auto;
		}

		.video-img {
			margin-top: 16rpx;
			width: 312rpx;
			height: 242rpx;
			border-radius: 16rpx;
		}
	}

	.video-item+.video-item {
		background: linear-gradient(129deg, #ECEAFF 0%, #F6FFFC 61%, #FFFFFF 100%);
	}

	.notice-box {
		height: 122rpx;
		background: linear-gradient(131deg, #F9F0FF 0%, #FFFBED 45%, #FFFFFF 100%);
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 800;
		color: #000;
		padding: 20rpx;

		view+view {
			color: #666;
			font-size: 24rpx;
			margin-top: 12rpx;
			font-weight: 400;
		}

		image {
			width: 46rpx;
			height: 36rpx;
		}
	}

	.house-box {
		height: 94rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		margin-top: 38rpx;
		padding: 0 22rpx;

		.house-more {
			font-size: 24rpx;
			color: #666;
			font-weight: 500;

			image {
				width: 24rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}

		.active {
			position: relative;
			color: #e47117;
			font-size: 32rpx;
			font-weight: 800;

		}

		.inactive {
			font-size: 28rpx;
			font-weight: 500;
			color: #000;
		}

		.active-bar {
			position: absolute;
			bottom: -15rpx;
			left: 0;
			right: 0;
			margin: auto;
			width: 26rpx;
			height: 10rpx;
			background: #F87610;
			border-radius: 6rpx;
		}
	}

	.house-name {
		font-size: 24rpx;
		color: #333;
		font-weight: 600;

		.house-tag {
			width: 112rpx;
			height: 36rpx;
			background: linear-gradient(180deg, #7E7872 0%, #4E4E4E 100%);
			border-radius: 8rpx;
			text-align: center;
			line-height: 36rpx;
			color: #fff;
			font-size: 20rpx;
			font-weight: 500;
			margin-right: 12rpx;

		}
	}

	.house-info {
		font-size: 24rpx;
		font-weight: 500;
		color: #666;
	}

	.house-desc {
		font-size: 22rpx;
		color: #E47117;
	}

	.house-price {
		color: #DF0F0F;
		font-weight: 800;
		font-size: 24rpx;
	}
</style>